<template>
	<view class="wrap">
		<view class="content">
			<view class="item">
				<view class="title">请假类型</view>
				<view class="type" @click="show = true">
					<text>{{type || '请选择请假类型'}}</text>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="title">开始时间</view>
				<view class="date" @click="startShow = true">
					<text>{{startDate ? $dateFormat(startDate) : '请选择开始时间'}}</text>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="title">结束时间</view>
				<view class="date" @click="handleEnd">
					<text>{{endDate ? $dateFormat(endDate) : '请选择结束时间'}}</text>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="title">请假事由</view>
				<view class="text">
					<u--textarea v-model="reason" placeholder="请输入" count></u--textarea>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="handleSubmit">提交</view>
		</view>
		
		<u-picker :show="show" :columns="columns" :closeOnClickOverlay="true" @confirm="handleConfirm" @cancel="show=false" @close="show=false" keyName="label"></u-picker>
		
		<u-datetime-picker :show="startShow" :minDate="mindate" @close="startShow=false" @cancel="startShow=false" @confirm="handleStartTime"
			v-model="startDate" mode="date"></u-datetime-picker>
			
		<u-datetime-picker :show="endShow" :minDate="startDate" @close="endShow=false" @cancel="endShow=false" @confirm="handleEndTime"
				v-model="endDate" mode="date"></u-datetime-picker>
	</view>
</template>

<script>
import { apply } from '../../../api/manager'
import { getConfigs } from '../../../api/user'

	export default {
		data () {
			return {
				startDate: '',
				endDate: '',
				startShow: false,
				endShow: false,
				mindate: Number(new Date()),
				show: false,
				type: '',
				type1: '',
				reason: '',
				columns: [[]]
			}
		},
		onLoad () {
			this.getData()
		},
		methods: {
			async getData () {
				let res = await getConfigs({name: 'leave'})
				var obj = JSON.parse(res.data.value)
				for (var k in obj) {
					this.columns[0].push({
						label: obj[k],
						id: k
					})
				}
			},
			
			handleConfirm (e) {
				console.log(e.value[0])
				this.type = e.value[0].label
				this.type1 = e.value[0].id
				this.show = false
			},
			
			handleEnd () {
				if (!this.startDate) {
					uni.$u.toast('请选择开始日期')
					return
				}
				this.endShow = true
			},
			
			handleStartTime (e) {
				this.endDate = ''
				this.startShow = false
				this.$forceUpdate()
			},
			
			handleEndTime (e) {
				this.endShow = false
				this.$forceUpdate()
			},
			
			async handleSubmit () {
				if (!this.type1) {
					uni.$u.toast('请选择请假类型')
					return
				}
				if (!this.startDate) {
					uni.$u.toast('请选择开始时间')
					return
				}
				if (!this.endDate) {
					uni.$u.toast('请选择结束时间')
					return
				}
				if (!this.reason) {
					uni.$u.toast('请填写事由')
					return
				}
				let params = {
					type: 2,
					start_time: this.$dateFormat(this.startDate),
					end_time: this.$dateFormat(this.endDate),
					remark: this.reason,
					type1: this.type1
				}
				let res = await apply(params)
				uni.$u.toast(res.msg)
				setTimeout(() => {
					uni.navigateBack()
				}, 1200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #F2F2F2;
		box-sizing: border-box;
		
		.content {
			padding: 15px 15px 70px;
			box-sizing: border-box;
			
			.item {
				padding: 12px;
				border-radius: 10px;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 15px;
				
				.title {
					font-size: 16px;
					margin-bottom: 15px;
				}
				
				.date {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					text {
						font-size: 16px;
					}
				}
				
				.type {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					text {
						font-size: 16px;
					}
				}
			}
		}
		
		.bottom {
			width: 100%;
			padding: 12px;
			height: 70px;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			
			.btn {
				width: 100%;
				height: 42px;
				line-height: 42px;
				text-align: center;
				background-color: #0a84ff;
				color: #fff;
				font-size: 16px;
				border-radius: 8px;
				box-sizing: border-box;
			}
		}
	}
</style>